<script setup lang="ts">
//选项
import { ref } from "vue";
import axios from "axios";

//传来的值
const dataLocal = (window as any).dataLocal;

//请求地址
const ajaxurl = dataLocal.ajaxurl;

//获取传来的设置值
const optionKey = ref(dataLocal.OptionKey.key);

//保存选项
const saveData = () => {
  //将拿到的值组合成参数
  const data = {
    key: optionKey.value,
  };
  //请求参数
  const postData = {
    action: "save_api_dev_demo_option_callback", // 自定义的Ajax处理函数名称
    object_data: JSON.stringify(data), // 将对象转换为 JSON 字符串
  };

  console.log(data);
  // 发送POST请求
  axios
    .post(
      ajaxurl, // WordPress提供的全局变量，指向admin-ajax.php文件
      postData, // 使用qs库将postData对象序列化为表单数据
      {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded", // 设置 Content-Type axios会自动将JavaScript对象序列化为表单数据形式
        },
      }
    )
    .then((response) => {
      console.log(response);
      alert("保存成功，现在可以使用查询功能了");
    })
    .catch((_error) => {
      console.log(_error);
      alert("保存失败，请检查网络连接");
    });
};
</script>
<template>
  令牌：<input
    type="text"
    placeholder="appCode"
    v-model="optionKey"
    style="width: 300px"
  />
  <br />
  请填写您申请的令牌，申请地址：<a
    href="https://doc.topthink.com/think-api/APIdiaoyong.html"
    target="_blank"
    >点击申请</a
  >
  <br />

  <hr />
  <button class="button button-primary" @click="saveData">保存选项</button>
</template>

<style scoped>
#button {
  margin-top: 20px;
}
</style>
